<!--
  @author:  long
  @date:    2023/4/6
  @file:    xx
  @require:
-->
<template>
  <div class="performanceDetails">
    <el-table
      show-summary
      :summary-method="getSummaries"
      :data="tableData"
      border
      :span-method="spanMethod"
    >
      <el-table-column
        type="index"
        label="序号"
        fixed="left"
        width="55"
        align="center"
        :index="indexMethod"
      ></el-table-column>
      <el-table-column
        label="一级指标"
        fixed="left"
        prop="firstLevel"
        width="150"
      ></el-table-column>
      <el-table-column
        label="二级指标"
        fixed="left"
        prop="secondLevel"
        width="150"
      ></el-table-column>
      <el-table-column
        label="指标说明及工作内容、工作要求等"
        width="320"
        fixed="left"
        show-overflow-tooltip
        prop="content"
      ></el-table-column>
      <el-table-column label="指标单位" width="100" prop="unit">
        <!--        <template #default="scope">-->
        <!--          <dict-tag :options="indicator_unit" :value="scope.row.unit" />-->
        <!--        </template>-->
      </el-table-column>
      <el-table-column
        label="指标值"
        width="100"
        prop="targetValue"
      ></el-table-column>
      <el-table-column
        label="考核评分标准"
        width="200"
        show-overflow-tooltip
        prop="scoreStandard"
      ></el-table-column>
      <el-table-column
        label="分值权重"
        width="100"
        prop="score"
      ></el-table-column>

      <!--      <el-table-column-->
      <!--        label="自评完成情况"-->
      <!--        width="130"-->
      <!--        prop="scoreDescriptionSelf"-->
      <!--      >-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="备注说明" width="130" prop="remark">-->
      <!--      </el-table-column>-->
      <el-table-column
        label="自评得分"
        align="center"
        fixed="right"
        prop="finalScoreSelf"
        width="80"
      >
      </el-table-column>
      <el-table-column
        fixed="right"
        label="考核得分"
        align="center"
        width="80"
        prop="finalScore"
      >
        <template
          v-if="
            isActive == 'personal' ||
            isActive == 'department' ||
            isActive == 'unit'
          "
          #default="scope"
        >
          <el-popover
            placement="left"
            title="指标考评明细"
            :width="500"
            trigger="click"
            @before-enter="handleBeforeEnter(scope.row)"
          >
            <el-table :data="scope.row.rowDetailList" v-loading="loading">
              <el-table-column label="考评人" prop="userName">
              </el-table-column>
              <el-table-column label="考评分值" prop="score"> </el-table-column>
              <el-table-column label="总分占比">
                <template #default="scope">
                  {{ scope.row.weight * 100 }}%
                </template>
              </el-table-column>
              <el-table-column label="完成情况">
                <template #default="scope">
                  <div class="flex items-center justify-between">
                    <span>{{
                      scope.row.description ? scope.row.description : '-'
                    }}</span>
                    <el-popover
                      ref="popover"
                      title="附件预览"
                      :width="300"
                      :disabled="scope.row.fileList == null"
                      trigger="hover"
                      placement="left-end"
                    >
                      <div>
                        <div
                          v-for="(item, index) in scope.row.fileList"
                          :key="index"
                          class="mb-5 w-full popoverContent"
                        >
                          <el-button
                            @click="viewFile(item.url)"
                            link
                            type="primary"
                          >
                            {{ item.origFileName }}</el-button
                          >
                        </div>
                      </div>
                      <template #reference>
                        <i
                          v-if="
                            scope.$index == 0 &&
                            scope.row.fileList != null &&
                            scope.row.fileList.length > 0
                          "
                          style="font-size: 14px"
                          class="i-cil-paperclip ml-2"
                          :class="
                            scope.row.fileList != null &&
                            scope.row.fileList.length > 0
                              ? 'text-blue-500'
                              : 'text-slate-400'
                          "
                        ></i>
                      </template>
                    </el-popover>
                  </div>
                </template>
              </el-table-column>
            </el-table>
            <template #reference>
              <el-button link type="primary">{{
                scope.row.finalScore
              }}</el-button>
            </template>
          </el-popover>
        </template>
        <template v-else #default="scope">{{ scope.row.finalScore }}</template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup name="PerformanceDetails">
import { setSpanObj } from '@/utils/index'
import { getCurrentInstance } from 'vue'
import { getViewDetail } from '@/api/officeManage/performance'
import { viewFile } from '@/utils/commo'
const { proxy } = getCurrentInstance()

const props = defineProps({
  tableData: {
    type: Array,
    default: () => {
      return []
    }
  },
  isActive: {
    type: String,
    default: () => {
      return ''
    }
  }
})

watchEffect(
  () => {
    if (props.tableData) {
      tableData.value = props.tableData
      isActive.value = props.isActive
      console.info(' tableData.value', tableData.value)
      console.info('isActive.value', props.isActive)
      // 初始化合并行
      setSpanObj(spanObj.value, tableData.value)
      indexObj('firstLevel')
    }
  },
  {
    flush: 'post'
  }
)

const data = reactive({
  tableData: [],
  spanObj: {
    firstLevel: { span: [] },
    secondLevel: { span: [] }
  },
  indexNum: {},
  isActive: '', //当前激活的tab类型
  rowDetailList: [] //指标考评明细
})
const { tableData, spanObj, indexNum, isActive, rowDetailList } = toRefs(data)
const { indicator_unit } = proxy.useDict('indicator_unit')
const loading = ref(false)

/**
 * 获取评分详情明细
 */
const handleBeforeEnter = row => {
  loading.value = true
  getViewDetail(row.id)
    .then(res => {
      row.rowDetailList = res.data != null ? res.data : []
    })
    .finally(() => {
      loading.value = false
    })
}

/**
 * @description: 合并行
 * @param row
 * @param column
 * @param rowIndex
 * @param columnIndex
 * @returns {{colspan: number, rowspan: number}|{colspan: number, rowspan: *}}
 */
const spanMethod = ({ row, column, rowIndex, columnIndex }) => {
  for (let i = 0; i < tableData.value.length; i++) {
    const ele = tableData.value[i]

    if (spanObj.value[column.property]) {
      const _row = spanObj.value[column.property].span[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    } else if (column.type == 'index') {
      const _row = spanObj.value.firstLevel.span[rowIndex]
      const _col = _row > 0 ? 1 : 0
      return {
        rowspan: _row,
        colspan: _col
      }
    } else {
      return {
        rowspan: 1,
        colspan: 1
      }
    }
  }
}

/**
 * 合计行
 */
const getSummaries = param => {
  const { columns, data } = param
  const sums = []
  columns.forEach((column, index) => {
    if (index == 10 || index == 11) {
      const values = data.map(item => Number(item[column.property]))
      if (!values.every(value => Number.isNaN(value))) {
        sums[index] = `${values.reduce((prev, curr) => {
          const value = Number(curr)
          if (!Number.isNaN(value)) {
            return prev + curr
          } else {
            return prev
          }
        }, 0)}`
      } else {
        sums[index] = '-'
      }
    } else {
      sums[index] = ''
    }
  })

  return sums
}

/**
 * @description: 自定义序号
 * @param index
 * @returns {*}
 */
const indexMethod = index => {
  return indexNum.value[index]
}

/**
 * 设置自定义序号
 */
const indexObj = key => {
  let num = 0
  spanObj.value[key].span.forEach((item, index) => {
    if (item != 0) {
      indexNum.value[index] = num += 1
    }
  })
}

/**
 * @description: 初始化
 */
const init = () => {}

onMounted(() => {
  proxy.$nextTick(() => {})
})

init()
</script>

<style scoped lang="scss">
.popoverContent {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  cursor: pointer;
}
</style>
